<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- v16.14.0 开发模式的源码，没有压缩 -->

    <!-- 1. 引入 React 的核心语法 -->
    <script src="./lib/React/react.devlopment.js"></script>
    <!-- 2. 引入 React 操作dom的文件 -->
    <script src="./lib/React/react-dom.development.js"></script>
</head>
<body>
    <!-- 3. 声明容器 -->
    <div id="app"></div>

    <script>

        // 4. 创建虚拟dom/虚拟节点   virtual  [ˈvɜːrtʃuəl]
        /*
            参数1： 节点名称
            参数2： 节点的标签属性  -  对象描述
            参数3： 节点的内容
            ...
        */
        const vNode = React.createElement(
            'h1',
            {
                id: 'title',
                des: 'news'
            },
            'Hello world.2'
        )

        // 5. 渲染到指定的容器中
        /* 
            参数1：指定的节点
            参数2：指定的容器 - 原生的获取元素方式
        */
        ReactDOM.render(
            vNode,
            document.getElementById('app')
        )


    </script>
</body>
</html>